<template>
  <el-form ref="ruleForm"  :model="form" label-width="80px" :rules="rules">
    <el-form-item label="标题" prop="title">
        <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item  label="内容：" prop="content">
       <quill-editor v-model="form.content" :options="editorOption" class = "publish-container"></quill-editor>
    </el-form-item>
    <el-form-item label="封面">
      <el-radio-group v-model="form.cover.type" @change="coverTypeFn">
        <el-radio :label="1">单图</el-radio>
        <el-radio :label="3">三图</el-radio>
        <el-radio :label="0">无图</el-radio>
        <el-radio :label="-1">自动</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 全局组件 文章封面 -->
    <el-form-item>
      <el-row :gutter="20">
        <el-col :span="3.5">
          <my-articles-cover v-model="form.cover.images[0]" v-if="form.cover.type==1||form.cover.type==3"></my-articles-cover>
        </el-col>
        <el-col :span="3.5">
          <my-articles-cover v-model="form.cover.images[1]" v-if="form.cover.type==3"></my-articles-cover>
        </el-col>
        <el-col :span="3.5">
          <my-articles-cover v-model="form.cover.images[2]" v-if="form.cover.type==3"></my-articles-cover>
        </el-col>
      </el-row>
    </el-form-item>

    <!-- 全局组件-文章频道 -->
    <my-articles-channel v-model="form.channel_id" prop="channel_id"></my-articles-channel>

    <el-form-item>
        <el-button type="primary" @click="onSubmit(null)">发布</el-button>
        <el-button type="primary" @click="onSubmit(true)">存为草稿</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 导入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入组件
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'articleAdd',
  components: {
    quillEditor
  },
  props: ['idid'],
  data: function () {
    return {
      isEdit: false,
      form: {
        title: '',
        content: '',
        cover: {
          type: 0,
          images: []
        },
        channel_id: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在5到30之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 20, max: 30000, message: '最少20个字', trigger: 'blur' }
        ],
        channelId: [
          { required: true, message: '请选择频道', trigger: 'blur' }
        ]
      },
      editorOption: {
        // 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  mounted () {
    if (this.idid) { // 如果idid存在, 则用户进入的是编辑文章页面
      this.isEdit = true
      this.getArticleByIdFn()
    }
  },
  methods: {
    getArticleByIdFn () { // 根据id获取文章 并填好数据
      this.$axios.get('/mp/v1_0/articles/' + this.idid).then(res => {
        this.form = res.data.data
      }).catch(err => {
        console.log(err)
        this.$message.error('出错了...请重试')
      })
    },
    onSubmit: function (draft) { // 点击按钮
      this.$refs.ruleForm.validate(a => { // element-ui表单验证
        if (a) {
          const query = { draft: draft } // true表示草稿 null表示发布
          this.isEdit // 判断并调用
            ? this.articleEditFn(query, this.form)
            : this.articleAddFn(query, this.form)
        } else {
          this.$message.error('提交格式不符合要求')
        }
      })
    },
    articleAddFn: function (query, body) { // 新增文章
      this.$axios.post('/mp/v1_0/articles', body, { params: query }).then(res => {
        // console.log(res)
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.form = { title: '', content: '', cover: { type: 0, images: [] } } // 清空表单数据
        this.channel_id = '' // 清空表单数据
      }).catch(err => {
        console.log(err)
        this.$message.error('出错了...请重试')
      })
    },
    articleEditFn: function (query, body) {
      this.$axios.put('/mp/v1_0/articles/' + this.idid, body, { params: query }).then(res => {
        console.log('编辑了文章', res)
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        this.isEdit = false
        this.$router.push('articles')// 返回文章列表页面
      }).catch(err => {
        console.log(err)
        this.$message.error('出错了...请重试')
      })
    },
    coverTypeFn (type) { // 用户在不同的封面类型上切换
      if (type === 1) { // 数组:arr.length = 1; 只会保存arr[0]的值，其它会清空掉
        this.form.cover.images.length = 1
      } else if (type <= 0) { // 数组:arr.length = 1; 只会保存arr[0]的值，其它会清空掉
        this.form.cover.images.length = 0
      }
    }
  }
}
</script>
<style scoped lang="less">
// 在父组件中去设置子组件的样式，加上/deep/ 实现穿透功能
.publish-container /deep/ .ql-editor{
  height: 300px;
}
.publish-container /deep/ .ql-toolbar.ql-snow{
  padding: 0 8px;
}

</style>
